<?php
include('config.php')
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<?php 
        include'head.php';
        
          if(isset($_GET['id']))
        {
            $id = intval($_GET['id']);
        }
        
	  $req = mysql_query('select latitude,longitude from point where ride="'.$id.'"'); 
	  $arrayLat = array();
	  $arrayLon = array();
       while($dnn = mysql_fetch_array($req))
       {
           array_push($arrayLat,(double)$dnn['latitude']);
	   array_push($arrayLon,(double)$dnn['longitude']);
     
       }
               

        ?>
	 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	
    <script type="text/javascript">
     var directionsDisplay; 
var directionsService = new google.maps.DirectionsService();
var map;
var waypts = [];
function initialize() {

	directionsDisplay = new google.maps.DirectionsRenderer();
	var lille = new google.maps.LatLng(50.650,3.083);
	var mapOptions = {
    zoom:15,
    center: lille
	}
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	directionsDisplay.setMap(map);

    calcRoute();
}


function calcRoute(){

var lenght = '<?php echo count($arrayLon); ?>' ; 
        var arrayLat= <?php echo json_encode($arrayLat); ?>;
	var arrayLon= <?php echo json_encode($arrayLon); ?>;
for (var i = 1; i < lenght - 1; i = i + 3)
{
 
waypts.push({
          location:new google.maps.LatLng(arrayLat[i], arrayLon[i]),
          stopover:false});
  }
 var request = {
        origin: new google.maps.LatLng(arrayLat[0],arrayLon[0]),
    destination: new google.maps.LatLng(arrayLat[lenght-1],arrayLon[lenght-1]),
   

		waypoints: waypts,
      travelMode: google.maps.TravelMode.BICYCLING
  };
       
 directionsService.route(request, function(response, status) {
		if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
		}
		});
	
}
 
      google.maps.event.addDomListener(window, 'load', initialize);
     
    </script>
	
</head>

<body>

<div id="global">

	<?php	include('menu.php'); ?>

	<div id="centre">

		<div id="principal">

			<div id="map-canvas">
				
				</div>
				<br />
			
		</div><!-- #principal -->

		<div id="secondaire">
	<?php include 'col_gauche.php'; ?>
	
		</div><!-- #secondaire -->

	</div><!-- #centre -->

</div><!-- #global -->

</body>
</html>


